<template>
    <div class="student-table-container">
        <n-card
              title="学生列表"
              hoverable
        >
            <div class="card-content">
                <div class="query-container">
                    <n-space>
                        <n-input
                              clearable
                              v-model:value="keyWord"
                        />
                        <n-button
                              type="primary"
                              @click="searchStudent"
                        >
                            搜索
                        </n-button>
                    </n-space>
                </div>
                <div class="table-container">
                    <n-data-table
                          :columns="columns"
                          :data="studentList"
                          :pagination="pagination"
                          :row-key="row => row.studentNumber"
                    />
                </div>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, h, ref } from 'vue'
import { NButton, useMessage } from 'naive-ui'
import { useRouter } from 'vue-router'
import api from '../api'

export default defineComponent({
    name: 'ShowStudent',
    
    beforeRouteEnter(to, from, next) {
        next((vm) => vm.getStudentList())
    },
    
    setup() {
        const router = useRouter()
        window.$message = useMessage()
        const studentList = ref([])
        const keyWord = ref('')
        const getStudentList = async () => {
            const resp = await api.student.findStudent('')
            studentList.value = resp.data.map((s) => {
                return {
                    studentNumber: s
                }
            })
        }
        const searchStudent = async () => {
            const resp = await api.student.findStudent(keyWord.value)
            studentList.value = resp.data.map((s) => {
                return {
                    studentNumber: s
                }
            })
        }
        return {
            studentList,
            keyWord,
            getStudentList,
            searchStudent,
            columns: [
                {
                    title: '学号',
                    key: 'studentNumber',
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'actions',
                    align: 'center',
                    render(row) {
                        return [
                            h(
                                NButton,
                                {
                                    type: 'primary',
                                    onClick: async () => router.push({name: 'enrollment', params: {
                                        studentNumber: row.studentNumber
                                    }})
                                },
                                { default: () => '查看学籍' }
                            ),
                            h(
                                NButton,
                                {
                                    type:'primary',
                                    onClick: async () => router.push({name: 'gradeList', params: {
                                        studentNumber: row.studentNumber
                                    }})
                                },
                                { default: () => '查看成绩' }
                            ),
                            h(
                                NButton,
                                {
                                    type: 'error',
                                    onClick: async () => {
                                        await api.enrollment.deleteEnrollment(row.studentNumber)
                                        window.$message.success('删除成功')
                                        await getStudentList()
                                    }
                                },
                                { default: () => '删除' }
                            )
                        ]
                    }
                }
            ],
        }
    },
    data() {
        return {
            pagination: {
                pageSize: 10
            },
        }
    },
    methods: {
    }
})
</script>

<style scoped lang="less">
.student-table-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10%;
    .n-card {
        width: 80%;
        height: 80%;
        
        .query-container {
            margin-bottom: 3%;
            display: flex;
        }
    }
}
</style>